<template>
  <el-select
    v-model="cityValue"
    filterable
    clearable
    @change="cityChange"
    placeholder="城市"
  >
    <el-option
      v-for="item in cityList"
      :key="item.id"
      :label="item.cityName"
      :value="item.cityCode"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getAllCity } from '@/api/after-sale/common/common'
import { mounted } from 'vuedraggable';
export default {
  model: {
    props: 'value',
    event: 'input',
  },
  props: {
    value: {
      default: '',
    },
  },
  data() {
    return {
      cityValue: '',
      cityList: [],
    }
  },
   watch: {
    value: function (newValue, oldValue) {
      this.cityValue = newValue;
       this.$emit('input', newValue)
    },
  },
  methods: {
    cityChange(value) {
      this.$emit('input', value)
    },
  },
  async mounted() {
    const { data } = await getAllCity()
    this.cityList = data;
    if(this.value){
      this.cityValue=this.value;
    }
  },
}
</script>